let content_input = document.querySelector('#content_input')
let list_box = document.querySelector('.list')
let start_btn = document.getElementById('start_btn')
let p = /[(\r\n)\r\n]+/  //换行正则
let list = []

content_input.addEventListener('keyup', function (e) {
  if (e.key == 'Enter') {
    list_box.innerHTML = ''
    list = this.value.split(p).filter(item => item != '')
    list.forEach(item => {
      list_box.appendChild(createdItem(item))
    });
  }

})
//动画持续的次数
let sustain_number = 10
// 动画的速度
let speed = 200
// 是否已经开始
let disabled = false
// 点击开始随机
start_btn.addEventListener('click', function () {
  if(!list.length){
    alert('请输入内容！')
    return
  }

  disabled = true
  this.disabled = disabled
  this.classList.add('disabled')
  let items =  document.querySelectorAll('.item')
  let random_number = Math.floor(Math.random() * list.length)
  exclusive(items,'active',random_number)
  let timer = setInterval(() => {
    sustain_number--
    if (sustain_number <= 0) {
      disabled = false
      this.disabled = disabled
      this.classList.remove('disabled')
      sustain_number = 10
      clearInterval(timer)
    } else {
      random_number = Math.floor(Math.random() * list.length)
      exclusive(items,'active',random_number)
    }

  }, speed)
})

// 排他
function exclusive(list,class_name,cur_index){
  list.forEach(item=>{
    item.classList.remove(class_name)
  })
  list[cur_index].classList.add(class_name)
}


function createdItem(value) {
  let item = document.createElement('div')
  item.classList.add('item')
  item.innerText = value
  return item
}